<%--
  Created by IntelliJ IDEA.
  User: 16781
  Date: 2022/6/15
  Time: 11:01
  To change this template use File | Settings | File Templates.
--%>
<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<c:set var="ctx" value="${pageContext.request.contextPath}"></c:set>
<style>
    .page{
        width: 100%;
        height: 50px;
        margin-top: 10px;
        margin-bottom: 10px;
        /* text-align 行内块元素水平居中 */
        text-align: center;
    }
    .page-num{
        font-size: 20px;
        font-weight: bold;
    }
    .page-num a{
        text-decoration: none;
        color: #ffffff;
        font-weight: 700;
        border-radius: 8px;
    }
    .page-num a,
    .page-num em
    {
        display:inline-block;
        width: 28px;
        height: 28px;
        /*border: 1px solid #cccccc;*/
        line-height: 28px;
        font-size: 14px;
    }
    /* 此处注意优先级 */
    .page-num .pn-prev,
    .page-num .pn-next{
        width: 86px;
        background-color: #76afe8;
    }
    .page-num .current-page,
    .page-num .dot-page{
        border: transparent;
    }
    /* 按钮禁用 */
    .page-num .disabled{
        /*background-color: #f1f0f0;*/
        cursor: not-allowed;
        filter: alpha(opacity=50); /*IE滤镜，透明度50%*/
        -moz-opacity: 0.5; /*Firefox私有，透明度50%*/
        opacity: 0.5; /*其他，透明度50%*/
        color:#cccccc;
    }
    /* 页面挑转 */
    .page-skip input{
        width: 36px;
        height: calc(32px - 4px);
        text-align: center;
        outline: none;
        border:1px solid #cccccc;
        /* 过渡 */
        transition: all 0.5s;
    }
    .page-skip button{
        width: 56px;
        height: 28px;
        background-color: #76afe8;
        border-radius: 8px;
        border:none;
        color: #fff;
        font-weight: bold;
    }
    /* 扩展输入框*/
    /* 去掉outline */
    .page-skip input:focus{
        width: 86px;
        border:1px solid skyblue;
    }
</style>
<!-- 分页 -->
<div class="page">
    <span class="page-num">
        <a class="pn-prev
            <c:if test="${pageBean.currentPage == 1 }">disabled</c:if>"
            <c:if test="${pageBean.currentPage != 1 }">href="${ctx}${param.url }?currentPage=${ pageBean.currentPage-1}"</c:if>>上一页
        </a>
        [ 第 ${pageBean.currentPage} 页 / 共 ${pageBean.totalPage} 页 ]
        <a class="pn-next
            <c:if test="${pageBean.currentPage == pageBean.totalPage
            }">disabled</c:if>"
                <c:if test="${pageBean.currentPage != pageBean.totalPage }">
                    href="${ctx}${param.url }?currentPage=${ pageBean.currentPage+1
                        }"
            </c:if>>下一页
        </a>
    </span>
    <span class="page-skip">跳转到 <input type="text">页
        <button>确定</button>
    </span>
</div>